<template>
  <view v-if="checkboxData.short.length != 0 || checkboxData.long.length != 0">
    <u-form-item label="关键词" :borderBottom="false"> </u-form-item>
    <u-checkbox-group v-model="form.label" placement="row" @change="checkbox">
      <u-checkbox
        label="全选"
        :customStyle="{ marginBottom: '16px' }"
        :checked="isAllChecked"
        @change="allChoose"
      />
      <view
        v-if="checkboxData.short.length > 0"
        style="
          margin-bottom: 16px;
          border-top: 1px dashed #ccc;
          padding-top: 10px;
        "
      >
        <div
          class="custom-grid"
          :style="{ 'grid-template-columns': `repeat(${grid_1}, 1fr)` }"
        >
          <div
            v-for="(item, index) in checkboxData.short"
            :key="index"
            class="grid-item"
          >
            <u-checkbox
              :customStyle="{ marginBottom: '8px', marginTop: '5px' }"
              :label="item.label_name"
              :name="item.id"
              :disabled="item.disabled"
              :checked="item.checked"
              @change="() => choose(item)"
            />
          </div>
        </div>
        <!-- <u-grid :col="grid_1">
          <u-grid-item v-for="(item, index) in checkboxData.short" :key="index">
            <u-checkbox
              :customStyle="{ marginBottom: '8px', marginTop: '5px' }"
              :label="item.label_name"
              :name="item.id"
              :disabled="item.disabled"
              :checked="item.checked"
              @change="() => choose(item)"
            />
          </u-grid-item>
        </u-grid> -->
      </view>
      <view
        style="border-top: 1px dashed #ccc; padding-top: 10px"
        v-if="checkboxData.long.length > 0"
      >
        <div
          class="custom-grid"
          :style="{ 'grid-template-columns': `repeat(${grid_2}, 1fr)` }"
        >
          <div
            v-for="(item, index) in checkboxData.long"
            :key="index"
            class="grid-item"
          >
            <u-checkbox
              :customStyle="{ marginBottom: '8px', marginTop: '5px' }"
              :label="item.label_name"
              :name="item.id"
              :disabled="item.disabled"
              :checked="item.checked"
              @change="() => choose(item)"
            />
            <!-- <u-checkbox
              :customStyle="{ marginBottom: '8px', marginTop: '5px' }"
              :label="item.label_name"
              :name="item.id"
              :disabled="item.disabled"
              :checked="item.checked"
              @change="() => choose(item)"
            /> -->
          </div>
        </div>
        <!-- <u-grid :col="grid_2">
          <u-grid-item v-for="(item, index) in checkboxData.long" :key="index">
            <u-checkbox
              :customStyle="{ marginBottom: '8px', marginTop: '5px' }"
              :label="item.label_name"
              :name="item.id"
              :disabled="item.disabled"
              :checked="item.checked"
              @change="() => choose(item)"
            />
          </u-grid-item>
        </u-grid> -->
      </view>
    </u-checkbox-group>
  </view>
</template>

<script setup>
import { ref, defineProps, watch, toRaw } from "vue";
import { GetSysLabel } from "@/api/userInfo";
import { onLoad } from "@dcloudio/uni-app";
// 定义emit事件
const emit = defineEmits([
  "update:modelValue",
  // "change"
]);
// 定义props接收父组件传递的初始值
// 0未注册
// 1居间人
// 2工程公司
// 3物资工厂
// 4设计公司
// 5监理公司
// 6劳务公司
// 7物资贸易商
// 8协会
const props = defineProps({
  company_type: {
    type: Number,
    default: 0,
  },
  grid_1: {
    type: Number,
    default: 4,
  },
  grid_2: {
    type: Number,
    default: 1,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
});

// 响应式数据
const checkboxData = ref({
  long: [],
  short: [],
});
const isAllChecked = ref(false);
const form = ref({
  label: [],
});
onLoad(async () => {
  // list.value = props.list;
  // let newObj = JSON.parse(JSON.stringify(props));
  // console.log(1245);
  init();
  // console.log(newObj);
});
// 封装GetSysLabel方法
const init = async () => {
  try {
    console.log("组件接收" + props.company_type);

    // 关键修改：第二个参数用props.modelValue（替代原list.value.list）
    const res = await GetSysLabel(props.company_type, props.modelValue);
    if (res.code == 10000) {
      // 处理长/短关键词（逻辑不变，但checked优先用modelValue匹配）
      checkboxData.value.long = (res.data.long || []).map((item) => ({
        ...item,
        disabled: false,
        // 关键：选中状态 = modelValue包含当前item.id（而非原item.selected）
        checked: props.modelValue.includes(item.id),
      }));

      checkboxData.value.short = (res.data.short || []).map((item) => ({
        ...item,
        disabled: false,
        checked: props.modelValue.includes(item.id), // 同上
      }));

      updateFormLabel(); // 同步选中值到v-model
      updateAllCheckedStatus(); // 同步全选状态
      return res;
    } else {
      throw new Error(res.message || "数据格式错误");
    }
  } catch (error) {
    console.error("获取标签数据失败:", error);
    throw error;
  }
};
// 合并所有选项为一个数组
const getAllItems = () => {
  return [...checkboxData.value.long, ...checkboxData.value.short];
};

// 更新全选状态
const updateAllCheckedStatus = () => {
  const allItems = getAllItems();
  isAllChecked.value =
    allItems.length > 0 && allItems.every((item) => item.checked);
};

// 更新表单选中值并通知父组件
const updateFormLabel = () => {
  const allItems = getAllItems(); // 合并长/短关键词数组（原逻辑不变）
  // 同步内部选中的ID到form.label
  form.value.label = allItems
    .filter((item) => item.checked)
    .map((item) => item.id);
  // 关键：通知父组件更新v-model（form.sys_label_id）
  emit("update:modelValue", form.value.label);
};
watch(
  () => props.company_type,
  (newVal, oldVal) => {
    // 过滤无效值（如初始默认值0，或与旧值相同的情况）
    const newType = Number(newVal);
    const oldType = Number(oldVal);
    if (newType === 0 || newType === oldType) return;

    // 类型变化且有效，重新请求数据
    console.log(`company_type从${oldType}变更为${newType}，重新请求接口`);
    init();
  },
  { immediate: false } // 初始化时立即执行（首次传递company_type时触发）
);

watch(
  () => props.modelValue,
  (newVal = []) => {
    // 默认空数组，避免undefined报错
    // 更新长关键词选中状态
    checkboxData.value.long.forEach((item) => {
      item.checked = newVal.includes(item.id);
    });
    // 更新短关键词选中状态
    checkboxData.value.short.forEach((item) => {
      item.checked = newVal.includes(item.id);
    });
    updateAllCheckedStatus(); // 同步全选状态
  },
  { immediate: true, deep: true } // immediate：初始化时执行；deep：监听数组内部变化
);

// 监听复选框变化，更新全选状态
watch(
  () => [checkboxData.value.long, checkboxData.value.short],
  () => {
    updateAllCheckedStatus();
    updateFormLabel();
  },
  { deep: true }
);
// 单个选项点击事件
const choose = (item) => {
  item.checked = !item.checked;
};

// 全选/取消全选事件
const allChoose = () => {
  const checked = !isAllChecked.value;
  // 更新长关键词
  checkboxData.value.long.forEach((item) => {
    item.checked = checked;
  });
  // 更新短关键词
  checkboxData.value.short.forEach((item) => {
    item.checked = checked;
  });
  // 更新选中状态
  isAllChecked.value = checked;
  updateFormLabel();
};
const checkbox = (e) => {
  console.log("checkbox");
  console.log(e);
};
</script>
<style scoped>
:deep(.u-grid-item) {
  align-items: baseline !important;
}
.custom-grid {
  display: grid;
  gap: 8px 16px; /* 行间距 列间距 */
  align-items: center;
}

.grid-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 如果需要自定义复选框样式 */
input[type="checkbox"] {
  margin: 5px 0 8px 0;
  width: 16px;
  height: 16px;
}
</style>
